<template>
  <div class='choose-money'>
    <p class="title">选择充值金额</p>

    <ul>
      <li v-for="item in getListData" :class="{'active':item.active}" @click="changemoney(item)">
        <p>{{item.money}}元</p>
        <p>赠送：{{item.gived}}元</p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props:["listData"],
  components: {},
  name: "",
  data() {
    return {};
  },
  computed:{
    getListData(){
      return this.listData
    }
  },
  methods: {
    changemoney(item){
      this.listData.forEach(ele => {
          ele.active=false
      });
      this.$set(item,"active",true)
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.choose-money {
  font-size: 14px;
  color: #333;

  p.title{
    color: #999;
    padding: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  ul{
    display: flex;
    flex-wrap: wrap;
    margin: 4% 10px 0;

    li{
      width: 30.5%;
      margin-right: 4%;
      margin-bottom: 4%;
      color: #999;
      padding: 15px;
      box-sizing: border-box;
      border: 1px solid #CDCDCD;
      text-align: center;
      border-radius: 3px;

      p:nth-child(2){
        color: #C9C9C9;
        margin-top: 3px;
      }
    }
    li:nth-child(3n+3){
      margin-right: 0;
    }

    .active{
      background-color: #F39519;
      border: none;

      p{
        color: #fff!important;
      }
    }
  }

}
</style>